@import '../../../styles/var.scss';

.m-payment-picker {
  &-body {
    padding: 72px 32px;

    &-amount {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 48px;

      &-title {
        font-size: $font-size-base;
        color: $text-color-secondary;
        margin-bottom: 16px;
      }

      &-num {
        display: flex;
        align-items: baseline;
        color: $text-color-main;

        &-unit {
          font-size: $font-size-xlarge;
        }

        &-value {
          font-size: 56px;
        }
      }
    }

    &-payment {
      border-radius: 16px;
      background: #f5f5fa;
      padding: 32px;
      margin-bottom: 64px;

      &-title {
        font-size: $font-size-base;
        color: $text-color-secondary;
        margin-bottom: 16px;
      }

      &-list {
        &-item {
          display: flex;
          align-items: center;
          gap: 24px;
          padding: 24px 32px;

          &-content {
            flex: 1;

            &-disabled {
              .m-payment-picker-body-payment-list-item-content-name,
              .m-payment-picker-body-payment-list-item-content-desc,
              .m-payment-picker-body-payment-list-item-content-desc-warning {
                color: $text-color-disabled;
              }
            }

            &-name {
              font-size: $font-size-large;
              color: $text-color-main;
              font-weight: 500;
            }

            &-desc {
              font-size: $font-size-small;
              color: $text-color-secondary;
              font-weight: 400;

              &-warning {
                color: $color-warning;
              }
            }
          }

          &-check {
            color: $color-primary;
          }
        }
      }
    }
  }
}
